<!-- bool Format -->
<template>
  <div>
    <div v-if ="status"  class="statustemp e-activecolor">
      <span class="statustxt e-activecolor">
        {{this.templateConfig.trueText}}
      </span>
    </div>
    <div v-else  class="statustemp e-inactivecolor">
      <span class="statustxt e-inactivecolor">
        {{this.templateConfig.falseText}}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      templateConfig: {
        trueText: 'Active',
        trueValue: 1,
        falseText: 'InActive',
        falseValue: 0
      }
    }
  },
  mounted () {
    this._.merge(this.templateConfig, this.$data.data.column.templateConfig)
  },
  computed: {
    status () {
      if (this.$data.data[this.$data.data.column.field] === this.templateConfig.trueValue) {
        return true
      }
      if (this.$data.data[this.$data.data.column.field] === this.templateConfig.falseValue) {
        return false
      }
    }
  },
  methods: {
  }
}
</script>

<style >
.statustxt.e-inactivecolor {
    color: #e60000;
    position: relative;
    height: 19px;
    border-radius: 5px;
    text-align: center;
}
.statustemp.e-inactivecolor {
    background-color: #ffd7cc;
    width: 64px;
    position: relative;
    height: 19px;
    border-radius: 5px;
    text-align: center;
}
.statustemp.e-activecolor {
    background-color: #ccffcc;
    width: 57px;
    position: relative;
    height: 19px;
    border-radius: 5px;
    text-align: center;
}
.statustxt.e-activecolor {
    color: #00cc00;
    position: relative;
    position: relative;
    height: 19px;
    border-radius: 5px;
    text-align: center;
}
</style>
